{include file="../application/admin/view/health/base.html" /}
<style>
    .container-box {
        background-color: rgb(241, 244, 246);
    }

    .header-tools {
        margin-bottom: 20px;
    }
</style>
<div class="container-box" id="DashboardIndex" v-cloak>
    <el-card class="header-tools">
        <div class="display-flex-b">
            <div></div>
            <div class="display-flex">
                <div style="width: 400px;">
                    <el-date-picker v-model="where.date" type="daterange" align="right" :clearable="false" unlink-panels
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                    :picker-options="pickerOptions" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>
            </div>
        </div>
    </el-card>

    <el-row :gutter=" 20">
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>用户总数</span>
                </div>
                <div class="text item">
                    {{dashboard.statistics.user_total||0}}
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>新增用户</span>
                </div>
                <div class="text item">
                    {{dashboard.statistics.new_user_total||0}}
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="display-flex-b">
                    <div>活跃用户</div>
                    <div>
                        <el-tooltip class="item" effect="dark" content="期间登陆过的用户" placement="top">
                            <i class="el-icon-warning-outline" style="font-size: 16px;"></i>
                        </el-tooltip>
                    </div>
                </div>
                <div class="text item">
                    {{dashboard.statistics.active_user_total||0}}
                </div>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>订单金额</span>
                </div>
                <div class="text item">
                    {{dashboard.statistics.order_amount_sum||0}}
                </div>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>健康服务点击统计</span>
                </div>
                <div>
                    <el-table :height="330" :data="dashboard.health_tracking" border style="width: 100%">
                        <el-table-column align="center" prop="type_name" label="服务名称">
                        </el-table-column>
                        <el-table-column align="center" prop="total" label="点击次数">
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>地区活跃用户排名</span>
                </div>
                <div>
                    <el-table :height="330" :data="dashboard.area_user" border style="width: 100%">
                        <el-table-column align="center" prop="date" label="地区">
                            <template slot-scope="scope">
                                {{scope.row.province}}-{{scope.row.city}}
                            </template>
                        </el-table-column>
                        <el-table-column align="center" prop="number" label="新增用户数">
                        </el-table-column>
                        <el-table-column align="center" prop="active_total" label="活跃用户数">
                        </el-table-column>
                    </el-table>
                </div>
            </el-card>
        </el-col>
        <el-col :span="12" style="margin-top: 20px;">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>留存数据</span>
                </div>
                <div id="user-remain-container">

                </div>
            </el-card>
        </el-col>
        <el-col :span="12" style="margin-top: 20px;">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>注册渠道</span>
                </div>
                <div id="user-channel-container">

                </div>
            </el-card>
        </el-col>
    </el-row>
</div>